// 引入 React 用于定义组件
import React, {useState} from 'react';
// 引入 dnd-kit 中的 useSortable hook
import {useSortable} from '@dnd-kit/sortable';
// 引入工具函数，用于 CSS 转换
import {CSS} from '@dnd-kit/utilities';
// 引入自定义的 CollectionCard 组件
import {CollectionCard} from '@/components/cards/CollectionCard';
// 引入偏好 store，用于判断集合是否展开
import {
    usePreferencesStore,
    selectExpandedCollections,
    makeCollectionPreferenceKey,
} from '@/stores/preferences';
// 引入 cn 工具用于合并类名
import {cn} from '@/lib/utils';
// 引入类型定义
import type {SpaceCollection} from '@/types';

// 定义组件的 props 接口
interface DraggableCollectionCardProps {
    id: string;
    collection: SpaceCollection;
    defaultExpanded?: boolean;
    className?: string;
    // 外部禁用拖拽（例如搜索过滤时）
    disableDrag?: boolean;
    isSortingContainer?: boolean;
}

// DraggableCollectionCard 组件：为 CollectionCard 提供拖拽能力
const DraggableCollectionCardComponent: React.FC<DraggableCollectionCardProps> = ({
    id,
    collection,
    defaultExpanded,
    className,
    disableDrag = false,
    isSortingContainer = false,
}) => {
    // 编辑状态：编辑时禁用拖拽
    const [isEditing, setIsEditing] = useState(false);
    // 调用 useSortable 创建拖拽能力，使用带前缀的 id 区分集合类型，编辑时禁用
    const {
        active,
        attributes,
        isDragging,
        listeners,
        over,
        setNodeRef,
        transition,
        transform,
    } = useSortable({
        id: id,
        data: {
            type: 'container',
            children: collection.tabs,
        },
        disabled: isEditing || disableDrag, // 编辑或外部禁用时禁用拖拽
        animateLayoutChanges: () => false // 关键：禁用数据变化时的自动动画
    });

    // todo bug
    // console.debug("over:", over, "active:", active);

    // 判断鼠标是否悬停在当前容器上（仅当拖拽的是具体 item，而非容器本身时）
    const isOverContainer = over
        ? (id === over.id && active?.data.current?.type !== 'container') ||
        (over.id as string).startsWith('tab-')
        : false;

    // 拆解 pointerDown，便于自定义拖拽触发区域，需要处理 listeners 可能为 undefined 的情况
    const {onPointerDown, ...restListeners} = listeners || {};

    // 从偏好 store 获取展开状态映射
    const expandedMap = usePreferencesStore(selectExpandedCollections);
    const prefKey = makeCollectionPreferenceKey(collection.spaceId, collection.collectionId);
    const isExpanded = expandedMap[prefKey] ?? defaultExpanded ?? true;

    // 根据拖拽状态与展开状态计算样式
    const style: React.CSSProperties = {
        // 位移转换：从 dnd-kit 获取 transform
        transform: CSS.Transform.toString(transform),
        // 过渡效果：从 dnd-kit 获取 transition
        transition,
        // 拖拽时让原卡片透明，由 DragOverlay 显示拖拽副本
        opacity: isDragging ? 0.5 : undefined,
    };

    // 根据展开状态和编辑状态计算容器光标类名
    const containerCursorClasses = (isExpanded || isEditing || disableDrag)
        ? 'cursor-default' // 展开时或编辑时使用默认箭头样式
        : 'cursor-grab'; // 折叠且未编辑时可拖拽整个集合

    // 渲染组件
    return (
        <div
            ref={setNodeRef}
            style={style}
            // 应用动态光标类名：根据展开状态区分交互区域
            className={cn(containerCursorClasses, !isExpanded && isOverContainer ? "hover:bg-amber-200" : "")}
            // 将 attributes 和 listeners（除 pointerDown）应用到 DOM
            {...attributes}
            {...restListeners}
            // 处理 pointerDown：自定义拖拽触发逻辑
            onPointerDown={(e) => {
                // 如果集合已展开或正在编辑，则不允许拖拽
                if (isExpanded || isEditing) {
                    return;
                }
                // 获取事件目标
                const target = e.target as HTMLElement;
                // 点击在按钮、SVG 图标或标题上时不触发拖拽
                if (target.closest('button') || target.closest('svg') || target.closest('h3')) {
                    return;
                }
                // 阻止冒泡，避免影响内部点击事件
                e.stopPropagation();
                // 如果原始 pointerDown 是函数，则调用
                if (typeof onPointerDown === 'function') {
                    onPointerDown(e);
                }
            }}
        >
            {/* 渲染实际的集合卡片，传递编辑状态回调 */}
            <CollectionCard
                collection={collection}
                defaultExpanded={defaultExpanded}
                className={className}
                onEditingChange={setIsEditing}
                // 搜索过滤下也需禁用内部标签拖拽
                disableInternalDrag={disableDrag}
                isSortingContainer={isSortingContainer}
            />
        </div>
    );
};

export const DraggableCollectionCard = React.memo(DraggableCollectionCardComponent);
